<template>
  <div class="recruitmentManagement">
    <van-sticky>
      <van-nav-bar title="报名信息" left-arrow @click-left=backMinePage>
        <template #right>
          <van-icon style="margin-right: 20px;" name="search" size="20"
                    @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!searchParams.keyword)"
          />
          <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
        </template>
      </van-nav-bar>
      <van-search
        v-show="searchBoxShow"
        v-model="searchParams.keyword"
        placeholder="请输入企业名、报名人姓名、职位名搜索"
        show-action
        shape="round"
        @search="onSearch"
        @clear="toClearKeyWord"
      >
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </van-sticky>


    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell
          @click="goWorkInfo(item)"
          v-for="(item, index) in navList"
          :key="index"
          :value="item.text"
          :icon="item.icon"
        />
      </van-cell-group>
    </van-overlay>

    <com-filter-menu
      :rightOptionObj="rightOptionObj"
      :rightOption="rightOption"
      :rightValue="searchParams.readStatus"
      @getFilterMenuValue="toGetFilterMenuValue_recruitmentManagement"
    ></com-filter-menu>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="jobArr">
        <job-item-for-recruit
          :jobItem="item"
          :typeenrool="1"
          :searchNameType="searchNameType"
          :titleName="titleName"
          :keyWord="'recruitmentManagement'"
          v-for="(item, index) in recruitJobArr"
          :key="item.id"
        ></job-item-for-recruit>
        <van-pagination
          v-show="total > 0"
          style="margin: 10px 0"
          v-model="searchParams.pageIndex"
          :total-items="total"
          :items-per-page="searchParams.pageSize"
          @change="handlePaginationChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
    </van-pull-refresh>

    <!--<nut-drag direction="y" :style="{right:'0px', top:'66%'}" class="quick_links">
      <nut-fixednav
        :nav-list="navList" @selected="selected" class="quick_links_detail"
        active-text="收起" un-active-text="导航"
      ></nut-fixednav>
    </nut-drag>-->
  </div>
</template>

<script>
import comFilterMenu from '../../../components/comFilterMenu'
import comJobItem from '../../../components/comJobItem';
import jobItemForRecruit from "./common/jobItemForRecruit";
import {GoWorkInfo} from '../../../utils/recruitToUrl'
import quickMenu from './common/quickMenu'
import {Toast} from 'vant';

import {navList} from "./common/comConstant";

const rightOptionObj = {
  '-1': '全部',
  '0': '报名未读',
  '1': '报名已读',
};

const rightOption = [
  {text: '全部', value: '-1'},
  {text: '报名未读', value: '0'},
  {text: '报名已读', value: '1'}
];

export default {
  name: 'recruitmentManagement',
  components: {
    quickMenu,
    comJobItem,
    comFilterMenu,
    jobItemForRecruit
  },
  data() {
    return {
      isLoading: false,
      searchNameType: '-1',
      rightValue: '-1',
      titleName: '全部',
      rightOption,
      rightOptionObj,
      showOverlay: false,

      navList,
      recruitJobArr: [],
      total: 0, // 总记录数

      // 检索参数
      searchParams: {
        status: 1,
        keyword: '', // 搜索关键字
        pageIndex: 1, // 当前页
        pageSize: 10, // 每页显示条数
        // 全部
        readStatus: '-1',
      },

      searchBoxShow: false,
    }
  },
  created() {
    this._getJobList()
  },
  methods: {
    //下拉刷新
    onRefresh() {
      this.recruitJobArr = [];
      this.searchParams.pageIndex = 1
      this._getJobList('refresh')
    },
    handlePaginationChange(pageIndex) {
      this.searchParams.pageIndex = pageIndex
      this._getJobList()
    },
    // 公共函数
    async _getJobList(e) {
      const res = await this.$api.job.getMycompanyJobPage(this.searchParams)
      if (res.code === 200) {
        this.recruitJobArr = res.data.items
        this.total = res.data.count || 0;
        this.isLoading = false
        if (e) {
          Toast('刷新成功')
        }
      }
    },


    goNeedPage_recruitStaff(val) {
      const keyWord = 'recruitStaff'
      if (val === 'search') {
        this.$router.push({
          path: `/searchRecords/${keyWord}`,
          query: {
            searchNameType: this.searchNameType,
            titleName: this.titleName
          }
        })
      }
    },

    selected($event) {
      console.log('当前点击', $event.item)
    },

    toGetFilterMenuValue_recruitmentManagement(val) {
      console.log('取值--', val);
      this.searchNameType = val;

      this.titleName = this.rightOptionObj[val];

      Object.assign(this.searchParams, {
        // 未读为0，已读为1。
        // readStatus: val === 'unread' ? 0 : 1;
        readStatus: val
      });

      this._getJobList();

    },
    //右上角---跳转页面
    goWorkInfo(data) {
      GoWorkInfo(data)
    },

    onSearch() {
      this.searchParams.pageIndex = 1
      if(this.searchParams.keyword.trim()){
        this._getJobList();
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.searchParams.keyword = '';
      this.searchParams.pageIndex = 1
      this.$nextTick(() => {
        this._getJobList()
      })
    },
    backMinePage(){
      localStorage.removeItem('tabItemIndex_myCompany');
      this.$router.push('/mine');
    },
  }
}
</script>

<style lang="scss" scoped>
.recruitmentManagement {
  width: 100%;
  min-height: 100vh;
  #bcid {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 3rem;
    text-align: center;
    color: #fff;
  }

  .over_layer {
    margin-top: 46px;
    height: 100%;

    .layer {
      width: 42%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }

  /deep/ .quick_links {
    .nut-fixednav.active .fixed-list {
      right: 0;
    }

    .quick_links_detail {
      .fixed-list {
        right: -110%;

        li {
          min-width: 1.56rem;

          img {
            /*display: none;*/
          }

          span {
            /*border: 1px solid blue;*/
          }
        }
      }
    }
  }
}
</style>
